import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入基础样式
import "@/assets/css/base.css";
import "@/assets/css/el-reset.css";
// 引入侧边栏菜单插件
import subMenu from "qf-sub-menu";
// 引入进度条
import nprogress from "nprogress";
// 引入进度条css
import "nprogress/nprogress.css";
Vue.use(subMenu);

Vue.use(ElementUI);

Vue.config.productionTip = false;

// 全局前置钩子（路由守卫）
router.beforeEach((to,from,next)=>{
  nprogress.start()
  //to 即将进入的路由
  //from 即将离开的路由
  //next 放行

  //判断本地存储中是否有token 
  //如果有就放行，没有就不通过，重新跳转到登录页
  //除了登录页以外，其他所有页面都不给用户访问，在没有登录的情况下
  let token = localStorage.getItem("qf-token")||""
  if(token){//已经登录
    //获取用户菜单
    //store中sideMenu是否为空数组，如果是空数组，那么就要获取用户菜单了
    if (store.state.sideMenu.length === 0) {
      // console.log(store.dispatch("GET_MENULIST"))
      store.dispatch("GET_MENULIST") //因为action函数我加了async 所以它是个promise<pendding>
        .then(() => {
          next({ path: to.path })//这里要注意,如果直接next,那么那个时候的动态路由还没生成,我们需要废掉前一个路由,再跳转一次,确保动态路由生效了
        })
    } else {
      next()
    }

    
  }else{//没有登录
    if(to.path!=="/login"){
      //跳转到登录页
      next({path:"/login"})
    }else{
      next()
    }
  }

})

// 自定义鉴权指令
Vue.directive("has",{
  inserted(el,binding){
    // console.log(el);
    // console.log(binding);
    //从本地取出用户的按钮权限
    let permission = localStorage.getItem("permissionButtons") || "[]"
    permission = JSON.parse(permission)
    console.log(permission);

    //看permission中是否包含传入的value对应字段
    //如果包含说明具备该按钮权限
    //不包含说明则要禁用按钮
    if(!permission.includes(binding.value)){
      //先保存按钮原来的类名
      let ElclassName = el.className
      //用原来的类名加上is-disabled触发禁用样式
      el.className = ElclassName + " " + "is-disabled"
      //真正禁用按钮
      el.disabled = true;

    }

  }
})

router.afterEach((to,from)=>{//全局后置钩子
  nprogress.done()
  // console.log(to);
  // console.log(from);
  let matched = [...to.matched] //浅拷贝到一个新数组
  matched.splice(0,1)
  // console.log(matched);

  // 调用commit触发mutation 更改vuex中存储的breadCrumb
  store.commit("SET_BREADCRUMB",matched)

})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
